<template>
	<!-- 交易 -->
	<view class="container">
		<view class="cmd-top">
			<view class="cmd_1">
				<view class="mt">
					<text></text>
					<view class="">
						<view class="mt-deJi"><image src="../../static/image/icon/v1.png" mode=""></image></view>
						<view class="mt-deJi"><text>等级:v1</text></view>
					</view>
				</view>
				<view class="mt">
					<text class="fengexian"></text>
					<view class="">
						<view class="mt_1"><text>9000HNW</text></view>
						<view class="mt_2"><text>最高买入量</text></view>
					</view>
				</view>
				<view class="mt">
					<text class="fengexian"></text>
					<view class="">
						<view class="mt_1"><text>10 HNW</text></view>
						<view class="mt_2"><text>最高释放量</text></view>
					</view>
				</view>
				<view class="mt">
					<text class="fengexian"></text>
					<view class="">
						<view class="mt_1"><text>10</text></view>
						<view class="mt_2"><text>最高交易轮次</text></view>
					</view>
				</view>
			</view>
			<view class="cmd_1">
				<view class="cmd-th">
					<text class="cmd-td">锁仓数量</text>
					<text class="cmd-tb">1000</text>
				</view>
				<view class="cmd-tp">
					<text class="cmd-td">今日交易释放</text>
					<text class="cmd-tb">2</text>
				</view>
			</view>

			<view class="cmd_1">
				<view class="cmd-sale-left">
					<text>
						<text class="HNW">HNW/</text>
						<text class="USDT">USDT</text>
					</text>
					<text class="cm_nber cm_colr_1">0.83</text>
					<text class="cm_nber cm_colr_2">+2.2%</text>
				</view>
				<view class="cmd-sale-right"><text>交易状态：交易中</text></view>
			</view>
			<view class="cmd_1">
				<view class="cmd-buyIn-left"><text class="buyIn">买入</text></view>
				<view class="cmd-sell-right"><text class="sell">卖出</text></view>
			</view>
			<view class="cmd_1" style="margin-bottom: 0;">
				<view style="flex: 1;">
					<view class="cmd-input">
						<input type="number" value="" />
						<text>HNW</text>
					</view>
					<view class="cmd_1 cmd-input-text">
						<text>≈3243.34CNY</text>
						<text>手续费: 0.02%</text>
					</view>
				</view>
			</view>
			<view class="cmd_1" style="margin-bottom: 0;">
				<view style="flex: 1;">
					<view class="cmd-input">
						<input type="number" value="" />
						<text>USDT</text>
					</view>
					<view class="cmd_1 cmd-input-text">
						<text>持有***hnw</text>
						<text>持有***usdt</text>
					</view>
				</view>
			</view>
			<view class="cmd_1">
				<view class="cmd-zhiN">
					<swiper class="swiper" :indicator-dots="false" :autoplay="false" current="1" duration="300">
						<swiper-item>
							<view id="demo2" class="swiper-item">
								<image src="../../static/image/icon/kaiqi.png" mode=""></image>
								<text>滑动关闭智能交易</text>
							</view>
						</swiper-item>
						<swiper-item>
							<view id="demo1" class="swiper-item ">
								<image src="../../static/image/icon/kaiqi.png" mode=""></image>
								<text>滑动开启智能交易</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="cmd_1">
				<text class="cmd-out">
					今日卖出次数
					<text class="cmd-ln">8</text>
					次
				</text>
				<text class="cmd-out">
					今日买入次数
					<text class="cmd-ln">10</text>
					次
				</text>
			</view>
		</view>
		<view class="cmd-bot" style="margin: 18rpx 20rpx;padding: 40rpx 20rpx;">
			<view class="cmd_1">
				<text class="cmd-title fontWid">当前委托</text>
				<text class="cmd-title">历史记录</text>
			</view>
			<!-- <view class="cmt-w-box">
				<view class="cmd_1">
					<view class="cmt-w-left">
						<text class="cmt-w_1">卖出</text>
						<text class="cmt-w_2">HNW/USDT</text>
						<text class="cmt-w_3">卖出次数5</text>
					</view>
					<view class="cmt-w-right">
						<text class="cmt-w_3">13:12 04/12</text>
						<text type="mini" class="cmt-btn">撤销</text>
					</view>
				</view>
				<view class="cmd_1">
					<view class="cmt-w-list">
						<text>成交量(HNW)</text>
						<view class="cmt-w-l-marTop"><text class="cmt-w-list-nber">2.56</text></view>
					</view>
					<view class="cmt-w-list">
						<text>价格</text>
						<view class="cmt-w-l-marTop">
							<text class="cmt-w-list-nber">
								2.56
								<text>USDT</text>
							</text>
						</view>
					</view>
					<view class="cmt-w-list">
						<text>手续费</text>
						<view class="cmt-w-l-marTop">
							<text class="cmt-w-list-nber">
								1
								<text>USDT</text>
							</text>
						</view>
					</view>
					<view class="cmt-w-list">
						<text>成交额(USDT)</text>
						<view class="cmt-w-l-marTop"><text class="cmt-w-list-nber">233</text></view>
					</view>
					<view class="cmt-w-list" style="flex-grow:1;">
						<text>交易释放量(HNW)</text>
						<view class="cmt-w-l-marTop"><text class="cmt-w-list-nber">7.23</text></view>
					</view>
				</view>
			</view> -->
			<transaction-list></transaction-list>
		</view>
	</view>
</template>

<script>
	import transactionList from "../component/transactionList.vue"
export default {
	components:{transactionList},
	data() {
		return {};
	}
};
</script>

<style lang="scss">
.container {
	background-color: #f6f6f6;
	height: auto;
}
.cmd-top,
.cmd-bot {
	margin: 18rpx 28rpx;
	background-color: #ffffff;
	padding: 40rpx;
}
.cmd_1 {
	display: flex;
	justify-content: space-between;
	color: #333333;
	font-size: 20rpx;
	text-align: center;
	margin-bottom: 30rpx;
	.mt {
		display: flex;
		align-items: center;
		// padding:0 30rpx;
		// border-right: 2rpx solid #D6D6D6;
		.fengexian {
			width: 2rpx;
			height: 40rpx;
			display: block;
			margin-right: 30rpx;

			background-color: #d6d6d6;
		}
	}
	.mt-deJi {
		image {
			width: 60rpx;
			height: 40rpx;
			margin-bottom: 15rpx;
		}
	}
	.mt_2 {
		color: #999999;
		margin-top: 20rpx;
	}
	.cmd-tp,
	.cmd-th {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.cmd-th {
		flex: 1;
		height: 54rpx;
		color: #c56969;
		background-color: #ffeded;
	}
	.cmd-tp {
		flex: 1;
		color: #619dca;
		margin-left: 20rpx;
		height: 54rpx;
		background-color: #dceffc;
	}
	.cmd-sale-left {
		color: #666666;
		font-size: 24rpx;
		.USDT {
			font-size: 20rpx;
		}
		.HNW {
			font-size: 30rpx;
		}
		.cm_colr_1 {
			color: #333333;
			margin-left: 10rpx;
		}
		.cm_colr_2 {
			color: #c56969;
			margin-left: 10rpx;
		}
	}
	.cmd-sale-right {
		font-size: 20rpx;
		color: #389d74;
	}
	.cmd-buyIn-left {
		flex: 1;
		padding: 20rpx 0;
		background-color: #2a9090;
		.buyIn {
			font-size: 28rpx;
			color: #ffffff;
		}
	}
	.cmd-sell-right {
		flex: 1;
		padding: 20rpx 0;
		margin-left: 24rpx;
		background-color: #f6f6f6;
		.sell {
			font-size: 28rpx;
			color: #666666;
		}
	}
	.cmd-input {
		border: 2rpx solid #eaeaea;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex: 1;
		height: 60rpx;
		text {
			color: #999999;
		}
	}
	.cmd-zhiN {
		flex: 1;
		height: 66rpx;
	}
	.cmd-input-text {
		color: #999999;
		font-size: 22rpx;
		margin-top: 10rpx;
	}
	.cmd-out {
		color: #424242;
		font-size: 24rpx;
		.cmd-ln {
			font-size: 36rpx;
			margin: 0 20rpx;
		}
	}
	.cmd-out:before {
		content: '';
		width: 8px;
		height: 8px;
		line-height: 8px;
		color: #d77f7f;
		margin-right: 15rpx;
		display: inline-block;
		border-radius: 4px;
		background-color: #d77f7f;
	}
	// .cmt-w-left,
	// .cmt-w-right {
	// 	font-size: 28rpx;
	// 	text {
	// 		margin-right: 10rpx;
	// 	}
	// 	.cmt-w_1 {
	// 		color: #9d3838;
	// 		font-weight: bold;
	// 	}
	// 	.cmt-w_2 {
	// 		color: #666666;
	// 		font-weight: bold;
	// 	}
	// 	.cmt-w_3 {
	// 		color: #999999;
	// 		font-size: 18rpx;
	// 	}
	// }
	// .cmt-w-right {
	// 	text {
	// 	}
	// 	.cmt-btn {
	// 		display: inline;
	// 		width: 94rpx;
	// 		height: 40rpx;
	// 		font-size: 22rpx;
	// 		color: #5178b1;
	// 		line-height: 40rpx;
	// 		padding: 7rpx 20rpx;
	// 		margin: 0;
	// 		border: 1px solid #5178b1;
	// 	}
	// }
}
// .cmt-w-box {
// 	border-top: 2rpx solid #c6c6c6;
// 	padding-top: 30rpx;
// 	.cmt-w-list {
// 		flex: 1 1 auto;
// 		color: #999999;
// 		font-size: 18rpx;
// 		padding: 0 6rpx;
// 		display: flex;
// 		flex-direction: column;
// 		justify-content: space-between;
// 		.cmt-w-l-marTop {
// 			margin-top: 15rpx;
// 			.cmt-w-list-nber {
// 				color: #333333;
// 				font-size: 22rpx;
// 				text {
// 					color: #999999;
// 					font-size: 18rpx;
// 				}
// 			}
// 		}
// 		.cmt-w-list-nber {
// 			color: #333333;
// 			font-size: 22rpx;
// 		}
// 	}
// }
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
	height: 66rpx;
}
.swiper {
	display: inline-block;
	width: 100%;
	height: 66rpx;
	color: #ffffff;
	line-height: 66rpx;
	text-align: center;
	font-size: 28rpx;
	border-radius: 14rpx;
	overflow: hidden;
	image {
		width: 44rpx;
		height: 38rpx;
	}
	.swiper-item {
		line-height: 66rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.cmd-bot {
	.cmd-title {
		color: #666666;
		font-size: 28rpx;
	}
	.fontWid {
		font-weight: bold;
	}
}

#demo1 {
	background: linear-gradient(to left, #89b0d9, #5178b1);
}
#demo2 {
	background: linear-gradient(to left, #f3afaf, #d91b1b);
}
</style>
